<script setup>
import { ref, computed, watch, onMounted } from 'vue';
import { reqInquireTeacherPsychologyNote } from '@/api/teacher/record/psychology';
import { useTeacherStore } from '@/stores/modules/teacherStore.js';
import todoListItem from '@/component/todoListItem.vue';

// store
const teacherStore = useTeacherStore();

// 下拉加载
const load = () => {
    getWentiNote();
};

// 是否显示加载中
const loading = ref(false);

// 是否提示todolist没有更多数据
const noMore = ref(true);

// 在加载时和没有数据的时候不能继续使用下拉加载
// (可以理解为在加载时和没多数据时不能使用load方法)
const disabled = computed(() => loading.value || noMore.value);

// 表单数据
const reservationOption = ref('');

// 文体查询类型
const options = [
    {
        value: '',
        label: '全部'
    },
    {
        value: '0',
        label: '待审核'
    },
    {
        value: '23',
        label: '已通过'
    },
    {
        value: '24',
        label: '未通过'
    },
    {
        value: '33',
        label: '已完成'
    },
    {
        value: '34',
        label: '未完成'
    }
];

const psychologyList = ref([]);

let pageNo = 1;

watch(reservationOption, async () => {
    pageNo = 1;
    psychologyList.value = [];
    await getReservationNote();
    await getReservationNote();
});

const getReservationNote = async () => {
    try {
        const result = await reqInquireTeacherPsychologyNote(
            pageNo,
            5,
            reservationOption.value,
            teacherStore.restrictState
        );

        if (result.status == 200) {
            psychologyList.value.push(...result.dataList);
        } else {
            throw new Error(result.statusText);
        }
        pageNo++;
    } catch (e) {
        console.error(e.message);
    }
};

onMounted(() => {
    getReservationNote();
});
</script>

<template>
    <div class="container">
        <el-select
            v-model="reservationOption"
            size="large"
            class="option"
            placeholder="请选择要查询预约的类型"
        >
            <el-option
                v-for="option in options"
                :key="option.value"
                :label="option.label"
                :value="option.value"
            />
        </el-select>
        <div class="content">
            <ul
                class="todoList"
                v-infinite-scroll="load"
                :infinite-scroll-disabled="disabled"
                infinite-scroll-distance="10"
            >
                <todoListItem :psychologyList="psychologyList"></todoListItem>
                <div v-if="loading" class="loading" v-loading="loading"></div>
                <div v-if="noMore" class="no-more">没有更多数据了</div>
            </ul>
        </div>
    </div>
</template>

<style scoped lang="scss">
.container {
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: rgb(247, 247, 247);
}

.option {
    margin: 20rem;
    width: 90%;
}

.content {
    position: relative;
    width: 90%;
    flex: 1;
    font-size: 10rem;
    overflow: auto;
}

.todoList {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin-top: 20rem;
    overflow: auto;
    padding-top: 5rem;

    .loading {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 10rem;
        font-size: large;
        margin-top: 20rem;
        background-color: #bbb;
    }

    .no-more {
        width: 100%;
        height: 10rem;
        margin-top: 20rem;
        font-size: 14rem;
        color: #999;
        text-align: center;
    }
}
</style>
